<template>
<div id="resetZFB">
      <!--后退-->
      <img src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
      <div>
            <p style="text-align:center;"><img style="height:3rem; width:3rem; "src="../../assets/me/rubbish.png" alt=""></p>
            <p style="text-align:center;margin:1rem 0px;">
                <input  id="num" type="text"   placeholder="请输入新的支付宝账号">
            </p>
            <p id="verification" @click="verification">确定</p>
      </div>

</div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods:{
    verification(){
      var num= document.querySelector('#num');
      if (/^0?(13[0-9]|15[012356789]|18[0123456789]|14[0123456789]|17[0123456789])[0-9]{8;}$/.test(num.value)){
          this.$router.push('/resetPsw')
      } else if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4;})+$/.test(num.value)){
          this.$router.push('/resetPsw')
      } else {
        alert("请输入正确的支付宝账号！")
        return;
      }
    }
  }
}
</script>
<style>
#resetZFB > div{
    margin:5rem auto;
    width:80%;
    height:12.5rem;
    padding:0.75rem;
    background:#fff;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;
}
#resetZFB > img{
    height:0.75rem;
    width:0.4rem;
    margin:0.9rem 0.6rem;
}
#num{
    height:2.25rem; 
    line-height:2.25rem;
    padding:0px 0.5rem;
    border-radius:13px; 
    width:80%;
    border:2px solid #29a193;
 }
 #verification{
    margin:1.5rem auto;
    height:2.25rem;
    line-height:2.25rem;
    text-align:center;
    color:#fff;
    width:60%;
    background:#69b373;
 }
</style>